<template>
  <div id="content">
      <h1 style="text-align:center">测试功能</h1>
      <button @click="handleSendNoti">点击发送一条本地系统通知</button>

      <h3>请拖拽文件到下面区域：</h3>
      <div class="drop-view" ref="dropView">
          <div v-for="(item, index) in fileList" :key="index">
              {{item.name}} - {{item.path}}
          </div>
      </div>

      <button @click="handlePrintEvent">点击打印网页</button>
      <br>
      在 Chrome 浏览器中分析性能问题：Performance -> Main -> CallTree -> 嵌套底层关键代码
      <button @click="handlePerformanceTestEvent">性能测试调试</button>
  </div>
</template>

<script>
document.title = ''


const { remote } = window.require('electron')
const { Notification, app } = remote

export default {
    data () {
        return {
            fileList: []
        }
    },
    methods: {
        handleSendNoti: function () {
            let noti = new Notification({
                title: '您收到一条本地系统消息',
                body: '此为消息的正文，点击查看详情'
            })
            noti.show()
            noti.on('click', () => {
                alert('点击了本地系统消息')
            })
        },
        handlePrintEvent: function () {
            let webContent = remote.getCurrentWebContents()
            // 获取所有打印机
            let printers = webContent.getPrinters()
            printers.forEach(ele => {
                console.log(ele)
            })

            // 调起打印
            webContent.print({
                    silent: false,
                    printBackground: true,
                    deviceName: ''
                }, (success, errorType) => {
                    if (!success) console.log(errorType)
                }
            )
        },
        
        // 耗时函数，调试性能检测
        handlePerformanceTestEvent: function () {
            let a = 9;
            // 防止被优化，使用 eval 方法
            a = eval('for (let i = 0; i < 10000; i++) a = a * a')
            console.log("OK")
        }
    },
    mounted () {
        // 文件拖入过程
        this.$refs.dropView.addEventListener('dragover', ev => {
            console.log('dragover')
            ev.preventDefault()
        })

        this.$refs.dropView.addEventListener('drop', ev => {
            console.log(ev.dataTransfer.files)
            ev.dataTransfer.files.forEach(item => {
                this.fileList.push(item)
            });
            ev.preventDefault()
        })

        console.log(app.getPath("userData"))
    }
}
</script>

<style lang="less" scoped>

.drop-view {
    min-height: 150px;
    padding: 10px;
    margin: 10px;
    border: 1px solid #aaa;
}

</style>